
.grid-container {
  padding-top: 18px;
  display: grid;
  /* 10列自适应布局 */
  grid-template-columns: repeat(10, 1fr);
  /* 列间距（可选） */
  gap: 8px;
  /* 容器宽度自适应父元素 */
  width: 100%;
  /* 响应式处理（可选） */
  /* 小屏幕时显示5列 */
  /* @media (max-width: 768px) {
    grid-template-columns: repeat(5, 1fr);
  } */
  /* 手机显示2列 */
  /* @media (max-width: 480px) {
   grid-template-columns: repeat(2, 1fr);
  } */
}
  
.grid-item {
  box-sizing: border-box;
  border-radius: 5px;
  height: 28px;
  line-height: 28px;
  background-color: rgb(255, 255, 0);
  /* 基础样式 */
  /* padding: 1rem; */
  text-align: center;
  border: 1px solid #ddd;
  /* 内容自适应处理 */
  min-width: 0; /* 防止内容溢出 */
  word-break: break-word; /* 长文本换行 */
}   

body {
 position: relative;
}

div {
 box-sizing: border-box;
}

/* 整体容器样式 */
#type-page {
 max-width: 568px;
 margin: 0 auto;
 padding: 18px;
 font-family: "微软雅黑";
 text-align: center;
 color: #000;
}

/* 点名卡片样式 */
.name-card {
 min-height: 158px;
 background: #f8f9fa;
 border-radius: 15px;
 padding: 0 18px;
 overflow: hidden;
 box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

/* 滚动动画 */
.roll-animation {
 animation: roll 0.8s ease-in-out;
}

@keyframes roll {
 0% {
     transform: rotate(-5deg);
 }

 50% {
     transform: rotate(5deg);
 }

 100% {
     transform: rotate(0);
 }
}

/* 控制按钮样式 */
.controls {
 margin-top: 18px;
 display: flex;
 justify-content: space-around;
 align-items: center;
}

button {
 padding: 8px 18px;
 border: none;
 border-radius: 5px;
 font-size: 16px;
 cursor: pointer;
 transition: background-color 0.3s ease;
 /* 解决移动端点击按钮闪蓝色高亮的问题 */
 -webkit-tap-highlight-color: transparent;
}

button:hover {
 opacity: 0.8;
}

button:disabled {
 opacity: 0.5;
 cursor: not-allowed;
}

.action-blue {
 background-color: #3498db;
 color: white;
}

.action-red {
 background-color: #e74c3c;
 color: white;
}

/* loading特效样式 */
.loading {
 display: inline-block;
 width: 8px;
 height: 8px;
 border: 3px solid rgba(0, 0, 0, 0.1);
 border-top-color: #e74c3c;
 border-radius: 50%;
 animation: spin 1s ease-in-out infinite;
 margin-left: 6px;
}

@keyframes spin {
 to {
   transform: rotate(360deg);
 }
}

/* 点名框loading样式 */
.name-loading {
 display: inline-block;
 width: 28px;
 height: 28px;
 border: 5px solid rgba(0, 0, 0, 0.1);
 border-top-color: #e74c3c;
 border-radius: 50%;
 animation: spin 1s ease-in-out infinite;
 margin-top: 18px;
}

/* 列表样式 */
.student-list {
 display: flex;
 flex-wrap: wrap;
 justify-content: center;
 margin-top: 18px;
 gap: 7px;
}

.student-item {
 box-sizing: border-box;
 display: flex;
 flex-basis: 8%;
 justify-content: center;
 align-items: center;
 height: 28px;
 line-height: 28px;
 border: 1px solid #ccc;
 border-radius: 5px;
 background-color: rgb(255, 255, 0);
}

.blue-list {
 display: flex;
 flex-wrap: wrap;
 justify-content: center;
 margin-top: 18px;
 gap: 7px;
}

.blue-item {
 display: flex;
 /* flex-basis: 10%; */
 /* background-color: rgb(119, 169, 238); */
 background-color: rgb(255, 255, 0);
}

.blue-selected {
 background-color: rgb(119, 169, 238);
}

.selected {
 background-color: rgba(231, 76, 60, 0.9);
}

.play-type {
 padding: 18px 4px;
 display: flex;
 flex-wrap: wrap;
 gap: 6px;
}

.play-type button {
 display: flex;
 flex-grow: 1;
 flex-shrink: 1;
 flex-basis: 16%;
 justify-content: center;
 align-items: center;
 padding: 6px 6px;
 border: none;
 border-radius: 5px;
 font-size: 16px;
 cursor: pointer;
 transition: background-color 0.3s ease;
}